<script setup lang="ts">
import { GridLayout, GridItem } from 'grid-layout-plus'
import type {Layout} from "grid-layout-plus";
import {CSSProperties} from "vue";
import {ThemeVO} from "@/api/pb/theme";
import {useEmitt} from "@/hooks/web/useEmitt";

const emitt = useEmitt()

// 列与行数
const layoutColSize = inject<Ref<number>>('layoutColSize')!
const layoutRowSize = inject<Ref<number>>('layoutRowSize')!

// 网格数据
const themeList = inject<Ref<ThemeVO[]>>('themeList')!
const themeLayout = computed<Layout>(() => {
  return themeList.value.map(item => item.grid) as Layout
})

// 网格样式  根据长宽自动变化
const gridLayoutStyle = computed(() => {
  return {
    height: '810px',
    // 确保每行和每列都是20个单元格
    '--layout-background-size': `
      calc((100% - 5px) / ${layoutColSize.value})
      calc((100% - 5px) / ${layoutRowSize.value})
    `
  }
})

// 赋值并自动变化部分样式
const gridItemStyle = computed(() => (theme: ThemeVO): CSSProperties => {
  const grid = theme.grid
  const color = grid.css?.backgroundColor || '#FACC15'
  return {
    ...grid.css,
    // backgroundColor: theme.grid.static ? '#CCC' : theme.grid.css?.backgroundColor || '#FACC15FF',
    backgroundColor: color,
    boxShadow: grid.static ? `` : `0px 0px 40px ${color}`,
  }
})

/** 编辑 */
const updateTheme = (theme: ThemeVO) => {
  emitt.emit('updateTheme', theme)
}

/**
 * 高亮显示网格
 */
// 鼠标移入时高亮显示
const highlightThemeMoveOver = (id: number) => {
  emitt.emit('highlightThemeMoveOver', id)
}

// 鼠标移出时取消高亮
const highlightThemeMoveOut = (id: number) => {
  emitt.emit('highlightThemeMoveOut', id)
}

</script>

<template>
  <GridLayout
    :style="gridLayoutStyle"
    v-model:layout="themeLayout"
    :row-height="30"
    :col-num="layoutColSize"
    :max-rows="layoutRowSize"
    :auto-size="false"
    :vertical-compact="false"
    prevent-collision
    is-bounded
  >
    <GridItem
      :style="gridItemStyle(item)"
      v-for="item in themeList"
      :key="item.grid.i"
      :x="item.grid.x"
      :y="item.grid.y"
      :w="item.grid.w"
      :h="item.grid.h"
      :i="item.grid.i"
      :static="item.grid.static"
      @click="updateTheme(item)"
      @mouseenter="highlightThemeMoveOver(item.id)"
      @mouseleave="highlightThemeMoveOut(item.id)"
    >
      <div
        class="h-full w-full flex justify-center items-center font-bold text-xl select-none"
      >
        {{ item.grid.label }}
      </div>
    </GridItem>
  </GridLayout>
</template>

<style scoped lang="scss">
.vgl-layout {
  background-color: #eee;
}

.vgl-layout::before {
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  margin: 5px;
  content: '';
  background-image:
    linear-gradient(to right, lightgrey 1px, transparent 1px),
    linear-gradient(to bottom, lightgrey 1px, transparent 1px);
  background-repeat: repeat;
  //// 确保每行和每列都是20个单元格
  //background-size: calc((100% - 5px) / 20) calc((100% - 5px) / 20);
  background-size: var(--layout-background-size);
}
:deep(.vgl-item:not(.vgl-item--placeholder)) {
  border: 1px solid black;
}

:deep(.vgl-item--resizing) {
  opacity: 90%;
}

:deep(.vgl-item--static) {
  background-color: #cce;
}

.text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  font-size: 24px;
  text-align: center;
}
</style>
